<template>
  <view class="content-container">
    <!-- 搜索栏 -->
    <view class="search-bar">
      <view class="search-input" @click="goToSearch">
        <u-icon name="search" size="18" color="#999"></u-icon>
        <text class="search-placeholder">搜索母婴知识、产品...</text>
      </view>
      <u-icon name="scan" size="24" color="#666" @click="scanCode"></u-icon>
    </view>
    
    <!-- 分类标签 -->
    <view class="category-tabs">
      <scroll-view class="tabs-scroll" scroll-x>
        <view class="tabs-list">
          <view 
            v-for="(category, index) in categories" 
            :key="index"
            class="tab-item"
            :class="{ active: currentCategory === category.id }"
            @click="switchCategory(category.id)"
          >
            <text class="tab-text">{{ category.name }}</text>
          </view>
        </view>
      </scroll-view>
    </view>
    
    <!-- 内容列表 -->
    <scroll-view 
      class="content-list" 
      scroll-y 
      @scrolltolower="loadMore"
      @refresherrefresh="onRefresh"
      :refresher-enabled="true"
      :refresher-triggered="refreshing"
    >
      <!-- 瀑布流布局 -->
      <view class="waterfall-container">
        <view class="waterfall-column">
          <view 
            v-for="(item, index) in leftColumnItems" 
            :key="item.id"
            class="content-item"
            @click="viewContent(item)"
          >
            <view class="content-media">
              <!-- 视频内容 -->
              <view v-if="item.type === 'video'" class="video-wrapper">
                <image 
                  class="video-cover" 
                  :src="item.coverUrl" 
                  mode="aspectFill"
                  :lazy-load="true"
                ></image>
                <view class="video-play-btn">
                  <u-icon name="play-circle" size="30" color="white"></u-icon>
                </view>
                <view class="video-duration">
                  <text class="duration-text">{{ formatDuration(item.duration) }}</text>
                </view>
              </view>
              
              <!-- 图片内容 -->
              <image 
                v-else
                class="content-image" 
                :src="item.coverUrl" 
                mode="aspectFill"
                :lazy-load="true"
              ></image>
            </view>
            
            <view class="content-info">
              <text class="content-title">{{ item.title }}</text>
              <view class="content-meta">
                <view class="author-info">
                  <u-avatar :src="item.authorAvatar" size="20"></u-avatar>
                  <text class="author-name">{{ item.authorName }}</text>
                </view>
                <view class="content-stats">
                  <view class="stat-item">
                    <u-icon name="eye" size="12" color="#999"></u-icon>
                    <text class="stat-text">{{ formatCount(item.viewCount) }}</text>
                  </view>
                  <view class="stat-item">
                    <u-icon name="heart" size="12" color="#999"></u-icon>
                    <text class="stat-text">{{ formatCount(item.likeCount) }}</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
        
        <view class="waterfall-column">
          <view 
            v-for="(item, index) in rightColumnItems" 
            :key="item.id"
            class="content-item"
            @click="viewContent(item)"
          >
            <view class="content-media">
              <!-- 视频内容 -->
              <view v-if="item.type === 'video'" class="video-wrapper">
                <image 
                  class="video-cover" 
                  :src="item.coverUrl" 
                  mode="aspectFill"
                  :lazy-load="true"
                ></image>
                <view class="video-play-btn">
                  <u-icon name="play-circle" size="30" color="white"></u-icon>
                </view>
                <view class="video-duration">
                  <text class="duration-text">{{ formatDuration(item.duration) }}</text>
                </view>
              </view>
              
              <!-- 图片内容 -->
              <image 
                v-else
                class="content-image" 
                :src="item.coverUrl" 
                mode="aspectFill"
                :lazy-load="true"
              ></image>
            </view>
            
            <view class="content-info">
              <text class="content-title">{{ item.title }}</text>
              <view class="content-meta">
                <view class="author-info">
                  <u-avatar :src="item.authorAvatar" size="20"></u-avatar>
                  <text class="author-name">{{ item.authorName }}</text>
                </view>
                <view class="content-stats">
                  <view class="stat-item">
                    <u-icon name="eye" size="12" color="#999"></u-icon>
                    <text class="stat-text">{{ formatCount(item.viewCount) }}</text>
                  </view>
                  <view class="stat-item">
                    <u-icon name="heart" size="12" color="#999"></u-icon>
                    <text class="stat-text">{{ formatCount(item.likeCount) }}</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 加载更多 -->
      <view v-if="loading" class="loading-more">
        <u-loading-icon></u-loading-icon>
        <text class="loading-text">加载中...</text>
      </view>
      
      <!-- 没有更多 -->
      <view v-if="noMore" class="no-more">
        <text class="no-more-text">没有更多内容了</text>
      </view>
    </scroll-view>
    
    <!-- 发布按钮 -->
    <view class="publish-btn" @click="goToPublish">
      <u-icon name="plus" size="24" color="white"></u-icon>
    </view>
  </view>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { get } from '@/utils/request';
import { AIService } from '@/services/ai';
import { getCurrentUser } from '@/config/supabase';

// 内容项接口
interface ContentItem {
  id: string;
  type: 'video' | 'image' | 'article';
  title: string;
  coverUrl: string;
  mediaUrl?: string;
  duration?: number;
  authorId: string;
  authorName: string;
  authorAvatar: string;
  viewCount: number;
  likeCount: number;
  commentCount: number;
  tags: string[];
  createdAt: string;
  height?: number; // 用于瀑布流布局
}

// 分类接口
interface Category {
  id: string;
  name: string;
  icon?: string;
}

@Component
export default class ContentPage extends Vue {
  // 数据属性
  currentCategory: string = 'all';
  contentList: ContentItem[] = [];
  leftColumnItems: ContentItem[] = [];
  rightColumnItems: ContentItem[] = [];
  
  loading: boolean = false;
  refreshing: boolean = false;
  noMore: boolean = false;
  page: number = 1;
  pageSize: number = 20;
  
  categories: Category[] = [
    { id: 'all', name: '推荐' },
    { id: 'newborn', name: '新生儿' },
    { id: 'feeding', name: '喂养' },
    { id: 'sleep', name: '睡眠' },
    { id: 'health', name: '健康' },
    { id: 'education', name: '早教' },
    { id: 'products', name: '好物' },
    { id: 'experience', name: '经验' }
  ];
  
  // 生命周期
  onLoad() {
    this.loadContent();
  }
  
  onShow() {
    // 页面显示时刷新数据
    this.refreshContent();
  }
  
  onPullDownRefresh() {
    this.onRefresh();
  }
  
  onReachBottom() {
    this.loadMore();
  }
  
  // 方法
  
  /**
   * 加载内容
   */
  async loadContent(isRefresh: boolean = false) {
    if (this.loading) return;
    
    this.loading = true;
    
    try {
      let newItems: ContentItem[] = [];
      
      // 如果是推荐分类，使用AI推荐算法
      if (this.currentCategory === 'all') {
        newItems = await this.loadRecommendedContent(isRefresh);
      } else {
        // 其他分类使用传统方式加载
        const response = await get('/content/list', {
          category: this.currentCategory,
          page: isRefresh ? 1 : this.page,
          pageSize: this.pageSize
        });
        
        newItems = response.data.contents || [];
      }
      
      if (isRefresh) {
        this.contentList = newItems;
        this.page = 1;
        this.noMore = false;
      } else {
        this.contentList = [...this.contentList, ...newItems];
      }
      
      // 检查是否还有更多数据
      if (newItems.length < this.pageSize) {
        this.noMore = true;
      } else {
        this.page++;
      }
      
      // 重新分配瀑布流
      this.redistributeItems();
      
    } catch (error: unknown) {
      console.error('❌ 加载内容失败:', error);
      
      // 根据错误类型提供不同的用户提示
      let errorMessage = '内容加载失败';
      if (error instanceof Error) {
        if (error.message.includes('network')) {
          errorMessage = '网络连接异常，请检查网络后重试';
        } else if (error.message.includes('timeout')) {
          errorMessage = '请求超时，请稍后重试';
        } else {
          errorMessage = '服务暂时不可用，为您展示精选内容';
        }
      }
      
      // 使用模拟数据作为降级处理
      if (isRefresh || this.contentList.length === 0) {
        console.log('🔄 使用模拟数据作为降级处理');
        this.contentList = this.getMockContent();
        this.redistributeItems();
        
        // 如果成功加载了模拟数据，调整错误提示
        if (this.contentList.length > 0) {
          errorMessage = '为您展示精选内容';
        }
      }
      
      uni.showToast({
        title: errorMessage,
        icon: 'none',
        duration: 2000
      });
    } finally {
      this.loading = false;
      this.refreshing = false;
      uni.stopPullDownRefresh();
    }
  }
  
  /**
   * 加载AI推荐内容
   */
  async loadRecommendedContent(isRefresh: boolean = false): Promise<ContentItem[]> {
    try {
      // 获取当前用户信息
      const currentUser = await getCurrentUser();
      const userId = currentUser?.id || 'guest';
      
      // 获取用户的宝宝信息（用于个性化推荐）
      const babyInfo = uni.getStorageSync('currentBaby');
      const babyId = babyInfo?.id;
      
      console.log('🤖 开始加载AI推荐内容', {
        userId,
        babyId,
        category: this.currentCategory,
        isRefresh
      });
      
      // 调用AI推荐服务
      const recommendedContent = await AIService.getRecommendedContent(
        userId,
        babyId,
        this.currentCategory
      );
      
      console.log('✅ AI推荐内容获取成功', {
        count: recommendedContent.length,
        items: recommendedContent.map(item => ({ id: item.id, title: item.title }))
      });
      
      // AIService现在返回的数据已经是ContentItem格式，只需要添加高度计算
      const contentItems: ContentItem[] = recommendedContent.map((item: any) => ({
        ...item,
        // 确保所有必需字段都存在
        type: this.getContentType(item.type),
        coverUrl: item.coverUrl || this.generateCoverUrl(item.title, item.category || 'general'),
        authorName: item.authorName || this.getAuthorName(item.authorId || 'unknown'),
        authorAvatar: item.authorAvatar || this.generateAuthorAvatar(item.authorId || 'unknown'),
        viewCount: item.viewCount || Math.floor(Math.random() * 5000) + 100,
        likeCount: item.likeCount || Math.floor(Math.random() * 500) + 10,
        commentCount: item.commentCount || Math.floor(Math.random() * 100) + 5,
        tags: item.tags || [],
        createdAt: item.createdAt || new Date().toISOString(),
        height: this.calculateItemHeight(item.title)
      }));
      
      return contentItems;
      
    } catch (error: unknown) {
      console.error('❌ 加载AI推荐内容失败:', error);
      
      // 根据错误类型显示不同的用户提示
      let errorMessage = 'AI推荐暂时不可用，为您展示精选内容';
      if (error instanceof Error) {
        if (error.message.includes('network')) {
          errorMessage = '网络连接异常，AI推荐功能暂时不可用';
        } else if (error.message.includes('timeout')) {
          errorMessage = 'AI服务响应超时，为您展示精选内容';
        }
      }
      
      uni.showToast({
        title: errorMessage,
        icon: 'none',
        duration: 2500
      });
      
      // 降级到模拟推荐数据
      console.log('🔄 降级到模拟推荐数据');
      return this.getMockRecommendedContent();
    }
  }
  
  /**
   * 获取内容类型
   */
  getContentType(type: string): 'video' | 'image' | 'article' {
    const typeMap: { [key: string]: 'video' | 'image' | 'article' } = {
      'video': 'video',
      'article': 'article',
      'guide': 'article',
      'image': 'image'
    };
    return typeMap[type] || 'article';
  }
  
  /**
   * 生成封面图片URL
   */
  generateCoverUrl(title: string, category: string): string {
    const keywords = this.getCategoryKeywords(category);
    const prompt = encodeURIComponent(`${keywords} baby care ${title}`);
    return `https://trae-api-us.mchost.guru/api/ide/v1/text_to_image?prompt=${prompt}&image_size=portrait_4_3`;
  }
  
  /**
   * 获取分类关键词
   */
  getCategoryKeywords(category: string): string {
    const keywordMap: { [key: string]: string } = {
      'feeding': 'baby feeding nutrition',
      'sleep': 'baby sleep peaceful',
      'health': 'baby health care medical',
      'education': 'early education learning',
      'newborn': 'newborn baby care',
      'products': 'baby products items',
      'experience': 'parenting experience'
    };
    return keywordMap[category] || 'baby care';
  }
  
  /**
   * 获取作者名称
   */
  getAuthorName(authorId: string): string {
    const authorNames = [
      '张医生', '李营养师', '王老师', '陈护士', '刘专家',
      '妈妈小助手', '育儿达人', '宝妈经验分享', '儿科专家', '早教老师'
    ];
    const index = parseInt(authorId.slice(-1)) || 0;
    return authorNames[index % authorNames.length];
  }
  
  /**
   * 生成作者头像
   */
  generateAuthorAvatar(authorId: string): string {
    const avatarTypes = ['doctor', 'nurse', 'teacher', 'mother', 'expert'];
    const index = parseInt(authorId.slice(-1)) || 0;
    const type = avatarTypes[index % avatarTypes.length];
    return `https://trae-api-us.mchost.guru/api/ide/v1/text_to_image?prompt=professional%20${type}%20avatar&image_size=square`;
  }
  
  /**
   * 计算项目高度（用于瀑布流布局）
   */
  calculateItemHeight(title: string): number {
    // 根据标题长度和内容类型估算高度
    const baseHeight = 200;
    const titleHeight = Math.ceil(title.length / 15) * 20;
    return baseHeight + titleHeight + Math.floor(Math.random() * 100);
  }
  
  /**
   * 获取模拟推荐内容
   */
  getMockRecommendedContent(): ContentItem[] {
    return [
      {
        id: 'rec_1',
        type: 'video',
        title: '新生儿护理的10个关键要点',
        coverUrl: 'https://trae-api-us.mchost.guru/api/ide/v1/text_to_image?prompt=newborn%20baby%20care%20tips&image_size=portrait_4_3',
        authorId: 'expert_001',
        authorName: '张医生',
        authorAvatar: 'https://trae-api-us.mchost.guru/api/ide/v1/text_to_image?prompt=professional%20doctor%20avatar&image_size=square',
        viewCount: 12500,
        likeCount: 890,
        commentCount: 156,
        tags: ['新生儿', '护理', '健康'],
        createdAt: new Date().toISOString(),
        duration: 180,
        height: 280
      },
      {
        id: 'rec_2',
        type: 'article',
        title: '宝宝辅食添加时间表和注意事项',
        coverUrl: 'https://trae-api-us.mchost.guru/api/ide/v1/text_to_image?prompt=baby%20food%20schedule%20nutrition&image_size=portrait_4_3',
        authorId: 'nutritionist_001',
        authorName: '李营养师',
        authorAvatar: 'https://trae-api-us.mchost.guru/api/ide/v1/text_to_image?prompt=professional%20nutritionist%20avatar&image_size=square',
        viewCount: 8900,
        likeCount: 567,
        commentCount: 89,
        tags: ['辅食', '营养', '时间表'],
        createdAt: new Date().toISOString(),
        height: 320
      },
      {
        id: 'rec_3',
        type: 'video',
        title: '如何建立宝宝良好的睡眠习惯',
        coverUrl: 'https://trae-api-us.mchost.guru/api/ide/v1/text_to_image?prompt=baby%20sleep%20training%20peaceful&image_size=portrait_4_3',
        authorId: 'teacher_001',
        authorName: '王老师',
        authorAvatar: 'https://trae-api-us.mchost.guru/api/ide/v1/text_to_image?prompt=professional%20teacher%20avatar&image_size=square',
        viewCount: 15600,
        likeCount: 1200,
        commentCount: 234,
        tags: ['睡眠', '习惯', '训练'],
        createdAt: new Date().toISOString(),
        duration: 240,
        height: 300
      }
    ];
  }
  
  /**
   * 刷新内容
   */
  async refreshContent() {
    try {
      console.log('🔄 开始刷新内容');
      this.refreshing = true;
      await this.loadContent(true);
      console.log('✅ 内容刷新完成');
    } catch (error) {
      console.error('❌ 刷新内容失败:', error);
      uni.showToast({
        title: '刷新失败，请稍后重试',
        icon: 'none',
        duration: 2000
      });
    } finally {
      this.refreshing = false;
    }
  }
  
  /**
   * 下拉刷新
   */
  async onRefresh() {
    try {
      await this.refreshContent();
    } catch (error) {
      console.error('❌ 下拉刷新失败:', error);
    }
  }
  
  /**
   * 加载更多
   */
  async loadMore() {
    if (!this.noMore && !this.loading) {
      try {
        console.log('📄 加载更多内容');
        await this.loadContent();
      } catch (error) {
        console.error('❌ 加载更多失败:', error);
        uni.showToast({
          title: '加载更多失败，请重试',
          icon: 'none',
          duration: 1500
        });
      }
    }
  }
  
  /**
   * 切换分类
   */
  async switchCategory(categoryId: string) {
    if (this.currentCategory === categoryId) return;
    
    try {
      console.log('🔄 切换分类:', categoryId);
      
      this.currentCategory = categoryId;
      this.page = 1;
      this.noMore = false;
      this.contentList = [];
      this.leftColumnItems = [];
      this.rightColumnItems = [];
      
      await this.loadContent(true);
      
      console.log('✅ 分类切换完成:', categoryId);
    } catch (error) {
      console.error('❌ 切换分类失败:', error);
      uni.showToast({
        title: '分类加载失败，请重试',
        icon: 'none',
        duration: 2000
      });
    }
  }
  
  /**
   * 重新分配瀑布流项目
   */
  redistributeItems() {
    const leftItems: ContentItem[] = [];
    const rightItems: ContentItem[] = [];
    
    this.contentList.forEach((item, index) => {
      // 简单的交替分配策略
      if (index % 2 === 0) {
        leftItems.push(item);
      } else {
        rightItems.push(item);
      }
    });
    
    this.leftColumnItems = leftItems;
    this.rightColumnItems = rightItems;
  }
  
  /**
   * 格式化数量
   */
  formatCount(count: number): string {
    if (count < 1000) {
      return count.toString();
    } else if (count < 10000) {
      return (count / 1000).toFixed(1) + 'k';
    } else {
      return (count / 10000).toFixed(1) + 'w';
    }
  }
  
  /**
   * 格式化时长
   */
  formatDuration(seconds: number): string {
    if (!seconds) return '00:00';
    
    const minutes = Math.floor(seconds / 60);
    const remainingSeconds = seconds % 60;
    
    return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
  }
  
  /**
   * 查看内容详情
   */
  viewContent(item: ContentItem) {
    uni.navigateTo({
      url: `/pages/content/detail?id=${item.id}&type=${item.type}`
    });
  }
  
  /**
   * 跳转到搜索页面
   */
  goToSearch() {
    uni.navigateTo({
      url: '/pages/search/search'
    });
  }
  
  /**
   * 扫码功能
   */
  scanCode() {
    // #ifdef APP-PLUS || H5
    uni.scanCode({
      success: (res) => {
        console.log('扫码结果:', res.result);
        // 处理扫码结果
        this.handleScanResult(res.result);
      },
      fail: (error) => {
        console.error('扫码失败:', error);
        uni.showToast({
          title: '扫码失败',
          icon: 'none'
        });
      }
    });
    // #endif
    
    // #ifdef MP-WEIXIN || MP-TOUTIAO
    uni.scanCode({
      success: (res) => {
        console.log('扫码结果:', res.result);
        this.handleScanResult(res.result);
      },
      fail: (error) => {
        console.error('扫码失败:', error);
        uni.showToast({
          title: '扫码失败',
          icon: 'none'
        });
      }
    });
    // #endif
  }
  
  /**
   * 处理扫码结果
   */
  handleScanResult(result: string) {
    // 这里可以根据扫码结果进行不同的处理
    // 比如跳转到商品详情、添加好友等
    uni.showModal({
      title: '扫码结果',
      content: result,
      showCancel: false
    });
  }
  
  /**
   * 跳转到发布页面
   */
  goToPublish() {
    // 检查登录状态
    const token = uni.getStorageSync('token');
    const isGuest = uni.getStorageSync('isGuest');
    
    if (!token && !isGuest) {
      uni.showModal({
        title: '提示',
        content: '请先登录后再发布内容',
        success: (res) => {
          if (res.confirm) {
            uni.navigateTo({
              url: '/pages/login/login'
            });
          }
        }
      });
      return;
    }
    
    if (isGuest) {
      uni.showToast({
        title: '游客模式无法发布内容',
        icon: 'none'
      });
      return;
    }
    
    uni.navigateTo({
      url: '/pages/create/create'
    });
  }
  
  /**
   * 获取模拟内容数据
   */
  getMockContent(): ContentItem[] {
    return [
      {
        id: '1',
        type: 'video',
        title: '新生儿护理的5个要点，新手妈妈必看！',
        coverUrl: 'https://trae-api-us.mchost.guru/api/ide/v1/text_to_image?prompt=newborn%20baby%20care%20tips&image_size=portrait_4_3',
        duration: 180,
        authorId: '1',
        authorName: '张医生',
        authorAvatar: 'https://trae-api-us.mchost.guru/api/ide/v1/text_to_image?prompt=professional%20pediatrician%20doctor&image_size=square',
        viewCount: 1250,
        likeCount: 89,
        commentCount: 23,
        tags: ['新生儿', '护理'],
        createdAt: '2024-01-15T10:30:00Z'
      },
      {
        id: '2',
        type: 'image',
        title: '6个月宝宝辅食添加时间表，收藏备用',
        coverUrl: 'https://trae-api-us.mchost.guru/api/ide/v1/text_to_image?prompt=baby%20food%20schedule%20chart&image_size=portrait_4_3',
        authorId: '2',
        authorName: '李营养师',
        authorAvatar: 'https://trae-api-us.mchost.guru/api/ide/v1/text_to_image?prompt=professional%20nutritionist&image_size=square',
        viewCount: 890,
        likeCount: 156,
        commentCount: 45,
        tags: ['辅食', '营养'],
        createdAt: '2024-01-14T15:20:00Z'
      },
      {
        id: '3',
        type: 'video',
        title: '宝宝睡眠训练方法，让宝宝一觉到天亮',
        coverUrl: 'https://trae-api-us.mchost.guru/api/ide/v1/text_to_image?prompt=baby%20sleep%20training%20peaceful&image_size=portrait_4_3',
        duration: 240,
        authorId: '3',
        authorName: '王老师',
        authorAvatar: 'https://trae-api-us.mchost.guru/api/ide/v1/text_to_image?prompt=professional%20early%20education%20teacher&image_size=square',
        viewCount: 2100,
        likeCount: 234,
        commentCount: 67,
        tags: ['睡眠', '训练'],
        createdAt: '2024-01-13T09:15:00Z'
      },
      {
        id: '4',
        type: 'image',
        title: '这些母婴用品真的很好用，强烈推荐！',
        coverUrl: 'https://trae-api-us.mchost.guru/api/ide/v1/text_to_image?prompt=baby%20products%20essentials&image_size=portrait_4_3',
        authorId: '4',
        authorName: '妈妈小红',
        authorAvatar: 'https://trae-api-us.mchost.guru/api/ide/v1/text_to_image?prompt=young%20mother%20smiling&image_size=square',
        viewCount: 567,
        likeCount: 78,
        commentCount: 12,
        tags: ['好物', '推荐'],
        createdAt: '2024-01-12T14:45:00Z'
      },
      {
        id: '5',
        type: 'video',
        title: '宝宝发烧了怎么办？儿科医生教你正确处理',
        coverUrl: 'https://trae-api-us.mchost.guru/api/ide/v1/text_to_image?prompt=baby%20fever%20care%20medical&image_size=portrait_4_3',
        duration: 300,
        authorId: '1',
        authorName: '张医生',
        authorAvatar: 'https://trae-api-us.mchost.guru/api/ide/v1/text_to_image?prompt=professional%20pediatrician%20doctor&image_size=square',
        viewCount: 3200,
        likeCount: 456,
        commentCount: 89,
        tags: ['健康', '发烧'],
        createdAt: '2024-01-11T11:20:00Z'
      },
      {
        id: '6',
        type: 'image',
        title: '0-3岁宝宝早教游戏大全，在家就能做',
        coverUrl: 'https://trae-api-us.mchost.guru/api/ide/v1/text_to_image?prompt=baby%20early%20education%20games&image_size=portrait_4_3',
        authorId: '3',
        authorName: '王老师',
        authorAvatar: 'https://trae-api-us.mchost.guru/api/ide/v1/text_to_image?prompt=professional%20early%20education%20teacher&image_size=square',
        viewCount: 1800,
        likeCount: 267,
        commentCount: 34,
        tags: ['早教', '游戏'],
        createdAt: '2024-01-10T16:30:00Z'
      }
    ];
  }
}
</script>

<style lang="scss" scoped>
.content-container {
  background-color: #f5f5f5;
  min-height: 100vh;
  position: relative;
}

.search-bar {
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  background-color: white;
  
  .search-input {
    flex: 1;
    display: flex;
    align-items: center;
    height: 70rpx;
    padding: 0 25rpx;
    background-color: #f8f8f8;
    border-radius: 35rpx;
    margin-right: 20rpx;
    
    .search-placeholder {
      margin-left: 15rpx;
      font-size: 28rpx;
      color: #999;
    }
  }
}

.category-tabs {
  background-color: white;
  border-bottom: 1rpx solid #f0f0f0;
  
  .tabs-scroll {
    white-space: nowrap;
  }
  
  .tabs-list {
    display: flex;
    padding: 0 30rpx;
    
    .tab-item {
      flex-shrink: 0;
      padding: 25rpx 30rpx;
      margin-right: 10rpx;
      
      .tab-text {
        font-size: 28rpx;
        color: #666;
        transition: color 0.3s;
      }
      
      &.active {
        position: relative;
        
        .tab-text {
          color: #007aff;
          font-weight: 600;
        }
        
        &::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 40rpx;
          height: 4rpx;
          background-color: #007aff;
          border-radius: 2rpx;
        }
      }
    }
  }
}

.content-list {
  flex: 1;
  padding: 20rpx 15rpx;
}

.waterfall-container {
  display: flex;
  gap: 20rpx;
  
  .waterfall-column {
    flex: 1;
    
    .content-item {
      background-color: white;
      border-radius: 16rpx;
      margin-bottom: 20rpx;
      overflow: hidden;
      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
      
      .content-media {
        position: relative;
        
        .video-wrapper {
          position: relative;
          
          .video-cover {
            width: 100%;
            height: 400rpx;
          }
          
          .video-play-btn {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 80rpx;
            height: 80rpx;
            background-color: rgba(0, 0, 0, 0.6);
            border-radius: 40rpx;
            display: flex;
            align-items: center;
            justify-content: center;
          }
          
          .video-duration {
            position: absolute;
            bottom: 15rpx;
            right: 15rpx;
            padding: 8rpx 12rpx;
            background-color: rgba(0, 0, 0, 0.7);
            border-radius: 8rpx;
            
            .duration-text {
              font-size: 22rpx;
              color: white;
            }
          }
        }
        
        .content-image {
          width: 100%;
          height: 400rpx;
        }
      }
      
      .content-info {
        padding: 20rpx;
        
        .content-title {
          display: block;
          font-size: 28rpx;
          font-weight: 500;
          color: #333;
          line-height: 1.4;
          margin-bottom: 15rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        
        .content-meta {
          display: flex;
          justify-content: space-between;
          align-items: center;
          
          .author-info {
            display: flex;
            align-items: center;
            
            .author-name {
              margin-left: 10rpx;
              font-size: 24rpx;
              color: #666;
            }
          }
          
          .content-stats {
            display: flex;
            gap: 20rpx;
            
            .stat-item {
              display: flex;
              align-items: center;
              
              .stat-text {
                margin-left: 6rpx;
                font-size: 22rpx;
                color: #999;
              }
            }
          }
        }
      }
    }
  }
}

.loading-more {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40rpx;
  
  .loading-text {
    margin-left: 15rpx;
    font-size: 26rpx;
    color: #999;
  }
}

.no-more {
  text-align: center;
  padding: 40rpx;
  
  .no-more-text {
    font-size: 26rpx;
    color: #999;
  }
}

.publish